<template>
    <div class="title-nav">
        <div class="product-nav">
            <div class="product-navTitle">TA的推荐/经典案例</div>
            <span>更多 ></span>
            <div style="clear: both"></div>
        </div>
        <title-content></title-content>
        <viewpoint-content></viewpoint-content>
    </div>
</template>

<script>
    import TitleContent from '../../components/Business/TitleContent'
    import ViewpointContent from '../../components/Business/ViewpointContent'
    export default {
        name: "TitleNav",
        components :{
            TitleContent,
            ViewpointContent
        }
    }
</script>

<style scoped lang="less">
  .title-nav{
      margin-top: 10px;
      .product-nav{
          border-bottom: 1px  solid #ff536f;
          .product-navTitle{
              color: #ff536f;
              font-size: 20px;
              text-align: center;
              float: left;
              padding-bottom: 10px;
              padding-top: 10px;
          }
          span{
              color:#ff536f;
              float: right;
              font-size: 14px;
              line-height: 50px;
              margin-right: 20px;
              cursor:pointer;

          }
          ul{
              float: right;
              margin-right: 25px;
              li{
                  float: left;
                  font-size: 14px;
                  color: #999999;
                  padding: 0 8px 0 8px;
                  cursor:pointer
              }
              li:hover{
                  color:#ff536f;
              }
          }

      }
  }
</style>